import { Color } from 'https://unpkg.com/three/build/three.module.js';
import { initShaders } from '../jsm/Utils.js';
import lib from '../jsm/ThreeLib.js';
import Poly from '../jsm/Poly.js'
import Sky from '../jsm/Sky.js'

window.onload = function () {

    const backColor = new Color("rgba(0,0,0,1)");

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const gl = canvas.getContext("webgl");
    //开启颜色合成,才会有透明度的感觉
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    //初始化着色器
    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);

    canvas.oncontextmenu = function () {
        return false;
    }
    const sky = new Sky(gl);
    let poly = null;


    canvas.addEventListener("mousedown", function (event) {
        lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);
        if (event.button === 2) {
            //停止绘制
            if (!!poly) {
                poly.popVertice();
                sky.add(poly);
                poly = null;
            }
        } else {
            if (!poly) {
                poly = new Poly({ gl: gl });
            }

            var { x, y } = lib.GetCanvasPosi(event, canvas);

            if (poly.vertices.length == 0) {
                poly.addVertice(x, y);
            }
            poly.addVertice(x, y);
            poly.draw(["POINTS", "LINE_STRIP"]);
        }
        sky.draw(["POINTS", "LINE_STRIP"]);

    })

    canvas.addEventListener("mousemove", function (event) {
        if (!poly) {
            return;
        }

        let { x, y } = nodeAdsorption(event);

        poly.setVertice(poly.vertices.length / poly.size, x, y);


        lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);
        poly.draw(["POINTS", "LINE_STRIP"]);
        sky.draw(["POINTS", "LINE_STRIP"]);
    })

    //相邻的进行吸附
    function nodeAdsorption(event) {
        const { clientX, clientY } = event
        var { x, y } = { x: 0, y: 0 };
        //查询当前的
        for (var i = 0; i + 2 < poly.vertices.length - 1; i = i + 2) {
            var { x, y } = lib.GetCanvasCss(poly.vertices[i], poly.vertices[i + 1], canvas);
            if (clientX <= x + 5 && clientX >= x - 5) {
                if (clientY <= y + 5 && clientY >= y - 5) {
                    console.log("jinr");
                    return { x: poly.vertices[i], y: poly.vertices[i + 1] };
                }
            }
        }
        //查询全部的
        for (let j = 0; j < sky.children.length; j++) {
            for (var i = 0; i < sky.children[j].vertices.length - 1; i = i + 2) {
                var { x, y } = lib.GetCanvasCss(sky.children[j].vertices[i], sky.children[j].vertices[i + 1], canvas);
                if (clientX <= x + 5 && clientX >= x - 5) {
                    if (clientY <= y + 5 && clientY >= y - 5) {
                        console.log("jinr");
                        return { x: sky.children[j].vertices[i], y: sky.children[j].vertices[i + 1] };
                    }
                }
            }
        }

        return lib.GetCanvasPosi(event, canvas);
    }
}